<template>
  <div class="bottom-bar">
    <div class="check-content">
      <check-button class="check-width" 
                    :isChecked="isSelectAll"
                    @click.native="checkClick"/>
      <span @click="checkClick">全选</span>
    </div>

    <div class="price">
      {{totalPrice}}
    </div>

    <div class="caculate" @click="calcClick">
      结算:({{checkLength}})
    </div>
  </div>
</template>

<script>
  import CheckButton from '../../../components/content/checkBottom/CheckBottom.vue'
  import { mapGetters } from 'vuex';

  export default {
    name: 'CartBottomBar',
    components: {
      CheckButton,
    },
    computed: {
      ...mapGetters(['cartList']),
      totalPrice() {
        return '￥' + this.cartList.filter(item => {
          return item.checked
        }).reduce((preValue, item) => {
          return preValue + item.price * item.count
        }, 0).toFixed(2)
      },
      checkLength() {
        return this.cartList.filter(item => item.checked).length
      },
      isSelectAll() {
        if (this.cartList.length === 0 ) 
          return false

        // 使用filter
        // return !(this.cartList.filter(item => !item.checked).length)

        // 普通舒数组遍历
        // for (let item of this.cartList) {
          //   if (!this.checked)
        //     return false
        // }
        // return true

        // 使用every
        return this.cartList !== 0 && this.cartList.every(item => item.checked)
      }
    },
    methods: {
      checkClick() {
        if (this.isSelectAll) {
          return this.cartList.forEach(item => item.checked = false);
        } else {
          return this.cartList.forEach(item => item.checked = true);
        }
      },
      calcClick() {
        if (this.cartList.every(item => !item.checked)){
          this.$toast.shows('请选择购买的商品',1500)
        } else {
          this.$toast.shows('购买成功',1500)
        }
      }
    }
  }
</script>

<style scoped>
.bottom-bar {
  position: fixed;
  background-color: #eee;
  display: flex;
  width: 100vw;
  height: 40px;
  bottom: 49px;
}

.check-content {
  display: flex;
  align-items: center;
  margin-top: 7px;
}

.check-width {
  width: 25px;
  margin: 0 5px;
}

.price{
  margin-top: 14px;
  margin-left: 10px;
  font-size: 18px;
}

.caculate{
  background-color: rgb(243, 78, 111);
  color: #fff;
  width: 90px;
  line-height: 40px;
  padding-left: 15px;
  position: fixed;
  right: 0;
  font-size: 18px;
}
</style>